<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仲裁详情</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        #container{padding: 0;}
        .content{
            margin-top:.13rem;
			padding:0 0.35rem;
        }
        .arb_info{
			background:#FFF;
          padding:0.2rem 0.35rem;
        }
        .inline{
          padding:0.22rem 0;
        }
        .inline h3{
          line-height:0.6rem;
          font-size:0.3rem;
          font-weight:normal;
		  width:1.5rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
        }
        .inline p{
          color:#999999;
          padding-left:0.6rem;
          line-height:0.6rem;
          font-size:0.3rem;
          margin:0;
          text-align:right;
        }
        .inline .icon{
          width:1rem;
          height:1rem;
          border-radius:50%;
        }
        .inline .look{
          border: 1px solid #F6F6F6;
          color: #333;
          font-size:0.28rem;
          border-radius:1rem;
          margin-left:0.3rem;
          padding:0.11rem 0.25rem;
        }
		.arb_logBox{
			background:#FFF;
			padding-top:0.1rem;
		}

.step {
	background: #FFF;
	padding-bottom: 0.4rem;
}

.step .ftitle {
	font-weight: normal;
	margin-bottom: 0.6rem;
}

.step .ftitle:after {
	height: 0.05rem;
	background: #6B41E1;
}

.step .step_content {
	margin-bottom: 0.4rem;
}

.step .step_content>i {
	float: left;
	width: 0.5rem;
	height: 0.5rem;
	line-height: 0.5rem;
	text-align: center;
	font-size: 0.29rem;
	border-radius: 50%;
	background: #EEEEEE;
	color: #767676;
	font-style: normal;
}

.step .step_content>.info {
	float: left;
	width: calc(100% - 0.5rem - 0.3rem);
	margin-left: 0.3rem;
	border-bottom: 1px solid #F9F9F9;
	padding-bottom: 0.5rem;
}

.step .step_content>.info .h3 {
	font-weight: normal;
	line-height: 0.5rem;
	color: #2F2F2f;
	font-size: 0.31rem;
}

.step .step_content>.info .h3 i {
	background: #F30;
	color: #FFF;
	font-style: normal;
	font-size: 0.26rem;
	padding: 0.05rem 0.2rem;
	border-radius: 1rem;
	margin-left: 0.35rem;
	vertical-align: middle;
	margin-top: -0.08rem;
}

.step .step_content>.info .intrText {
	color: #777777;
	font-size: 0.29rem;
	line-height:0.6rem;
	margin-top: 0.3rem;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.step .step_content>.info .btnText {
	font-size: 0.29rem;
	margin-top: 0.3rem;
}

.step .step_content>.info .btnText .text {
	color: #2f2f2f;
	line-height: 0.6rem;
	word-break: break-all;
}

.step .step_content>.info .btnText .text ._link {
	color: #5A98FF;
}

.step .step_content>.info .btnText .btn {
	margin-top: 0.3rem;
}

.step .step_content>.info .btnText .btn a {
	float: left;
	font-size: 0.26rem;
	margin-right: 0.3rem;
	color: #939393;
	border: 1px solid #ECECEC;
	line-height: calc(0.55rem - 2px);
	height: 0.55rem;
	padding: 0px 0.25rem;
	border-radius: 0.07rem;
}

.step .step_content>.info .task_input {
	margin-top: 0.3rem;
	position: relative;
	padding: 0.12rem 0.1rem 0.12rem 0.29rem;
	background: #F6F6F6;
	border-radius: 0.07rem;
}

.step .step_content>.info .task_input input {
	height: 0.6rem;
	line-height: 0.6rem;
	outline: none;
	font-size: 0.29rem;
}

.step .step_content>.info .task_input ._select {
	width: 0.6rem;
	background: url(../../../../static/img/Triangle.png) no-repeat center center;
	background-size: 30%;
}

.step .step_content>.info .task_input span {
	display: block;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.25rem;
	text-align: right;
	color: #5A98FF;
}

.step .step_content>.info .img {
	margin-top: 0.35rem;
	margin-bottom: -0.25rem;
}

.step .step_content .info .img .item {
	float: left;
	margin-bottom: 0.25rem;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	margin-right: 0.2rem;
	position: relative;
}

.step .step_content .info .img .item:nth-last-child(1) {
	margin-right: 0;
}

.step .step_content .info .img .item span {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #FFF;
	font-size: 0.28rem;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	text-align: center;
	transform: translate(-50%, -50%);
}

.step .step_content .info .img .item img {
	display: block;
	width: 100%;
	object-fit: cover;
	height: 100%;
}

.step .step_content:nth-last-child(1) {
	margin-bottom: 0;
}

.step .step_content:nth-last-child(1)>.info {
	border-bottom: 0;
}
.task-steps{margin-top:0.25rem;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="info != null">
            <div id="container" :style="{'padding-bottom':containerPadding}">
                <div class="arb_info content">
                    <div class="inline disbox">
                        <h3>分类名称</h3>
                        <p class="disflex">{{info.task_info.first_name}} - {{info.task_info.seconde_name}}
                            <a @click="goTaskDetail" class="look">查看任务</a>
                        </p>
                    </div>
					<div class="inline disbox">
						<h3>悬赏价格</h3>
						<p class="disflex" style="color:#FF0909;">{{$.parsePrice(info.task_info.amount_actual, 2)}}元</p>
					</div>
					<div class="inline disbox">
						<h3>维权状态</h3>
						<p class="disflex" :style="{'color': renderStatusUI(info.arbitration_info.status).color}">{{renderStatusUI(info.arbitration_info.status).text}}</p>
					</div>
                    <div class="inline disbox">
                        <h3>任务标题</h3>
                        <p class="disflex">{{info.task_info.title}}</p>
                    </div>
					<div class="inline disbox">
						<h3>类型</h3>
						<p class="disflex">
							<img :src="info.task_info.icon" class="icon" />
						</p>
					</div>
					<div class="inline disbox">
					    <h3>仲裁ID</h3>
					    <p class="disflex">{{info.arbitration_info.id}}</p>
					</div>
					<div class="inline disbox">
					    <h3>接单时间</h3>
					    <p class="disflex">{{info.task_info.task_accept_time | dateFormate}}</p>
					</div>
					<div class="inline disbox">
					    <h3>仲裁时间</h3>
					    <p class="disflex">{{info.arbitration_info.report_time | dateFormate}}</p>
					</div> 
                </div>
                <div class="arb_logBox content">
					<div class="inline disbox">
					    <h3 style="width:100%;font-size:0.31rem;">任务步骤<font style="font-size:0.27rem;margin-left:0.3rem;color:#9a9a9a;float:right;">含接单人提交的内容</font></h3>
					</div> 
                    <div class="task-steps">
                        <div class="step stepDom">
                            <div class="step_content clearfix" v-for="(step, stepIndex) in steps">
                                <i>{{stepIndex+1}}</i>
                                <div class="info">
                                    <h3 class="h3">第{{Nzh.encodeS(stepIndex+1)}}步</h3>
                                    <template v-if="step.length > 0" v-for="(item, index) in step">
                                        <!-- 文本描述 -->
                                        <template v-if="item.type == 'Description'">
                                            <div class="intrText">{{item.value}}</div>
                                        </template>
                                        <!-- 可操作内容 -->
                                        <template v-if="item.type == 'Operable'">
                                            <div class="btnText" >
                                                <div class="text"> 
                                                    <!-- <div> -->
                                                        {{item.target.type}}：
                                                    <!-- </div> -->
                                                    <span class="_link copyDom"	@click="handCoypLink(item.target.value)">{{item.target.value}}</span>
                                                </div>
                                            </div>
                                        </template>
                                        <!-- 收集用户文字信息 -->
                                        <template  v-if="item.type == 'CollectTextInfo'">
                                            <div class="task_input flex">
                                                <input type="text" class="flex1" disabled="false" :value="item.value" />
                                            </div>
                                        </template>
                                        <!-- 图片 -->
                                        <template v-if="utils.isArray(item)" >
                                            <div class="img clearfix">
                                                <div class="item" v-for="imgItem in item">
                                                    <template v-if="imgItem.type == 'Gallery'">
                                                        <img class="comImgwh" :src="imgItem.uri" />
                                                        <span @click="viewPicture(imgItem.uri)" v-if="true">示例图</span>
                                                    </template>
                                                    <template v-if="imgItem.type == 'CollectGallery'">
                                                            <img @click="viewPicture(imgItem.uri)" class="comImgwh" :src="imgItem.uri" />
                                                    </template>
                                                </div>
                                            </div>                 
                                        </template>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var photoBrowser = api.require('photoBrowser');
			var clipBoard = api.require('clipBoard');
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    imgHeight:document.body.clientWidth,
                    rect:$.rect(),
                    containerPadding:0,

                    referer: '',
                    
                    id: 0,
                    logId: 0,
                    info: null,
                    lastLog: null,
                    steps: null,
                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy-MM-dd hh:mm');
                    },
                },
                created: function(){
                    this.id = api.pageParam.data.id;
                    this.referer = api.pageParam.data.referer;
                },
                methods:{
					handCoypLink(text) {
						clipBoard.set({
						    value: text
						}, function(ret, err) {
						    if (ret) {
						        $.toast('复制成功');
						    } else {
						        $.toast('复制失败');
						    }
						});
					},
                    goTaskDetail: function(){
                        if(this.info.ispublish == 1){
                            if(this.referer == 'publishDetail'){
                                api.closeWin();
                            }else{
                                $.openUrl('common/commonTitle','task/sendDetail',{title:'派单详情',taskId: this.info.task_info.task_id});
                            }
                        }else{
                            $.openUrl('common/commonTitle','task/detail',{title:'任务详情',taskId: this.info.task_info.task_id});
                        }
                    },
                    getMediaUrl: function(url){
						var exc = url.substr(url.lastIndexOf('.')+1).toLocaleLowerCase();
						if(['jpg','jpeg','gif','png','webp'].indexOf(exc) != -1){
							return url;
						}
						return '../../../image/task/video.png';
					},
                    renderStatusUI: function(status){
                        var report = this.info.ispublish.toString();
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';
                        var yellow = 'rgb(245, 120, 13)';
                        var statusInfo = {
                            '0': {text: '待审核', color: gray},
                            '1': {text: report == 1 ? '胜诉' : '败诉', color: report == 1 ? green: red},
                            '2': {text: report == 1 ? '败诉' : '胜诉', color: report == 1 ? red : green},
                            '3': {text: '待复审', color: yellow},
                            '4': {text: '待复审', color: yellow},
                            '5': {text: '待复审', color: yellow},
                            '6': {text: '判平', color: blue},
                            '7': {text: '判平', color: blue},
                        };
                        return statusInfo[status];
                    },
                    getDetail: function(){
                        var _this = this;
                        $.ajax({
                            url: '/task/arbitration/my_info/detail?id='+this.id,
                            method: 'get',
                            success: function(res){
                                _this.info = res.data;
                                _this.steps = res.data.task_info.custom_steps;
                            },
                        });
                    },
					viewMedia: function(url){
					    this.viewPicture(url);
					},
					viewPicture: function(img){
					    photoBrowser.open({
					        images: [img],
					        bgColor: '#000',
					        zoomEnabled: true,
					    }, function(ret, err) {
					        if(ret.eventType == 'click'){
					            photoBrowser.close();
					        }
					    });
					},
					viewVideo: function(video){
					    // 转码问题，暂时不做。
					},
                },
                mounted(){
                    $.initJs(this);
					this.getDetail();
                }
            });
        }
    </script>
</body>
</html>
